<template>
  <div class="search">
    <!-- 搜索页面 -->
    <van-search
      v-model="keywords"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- 热门搜索 -->
    <div class="hotWords">
      <div class="hotTitle">热门搜索</div>
      <ul class="hotContent">
        <li v-for="(hotword, index) in hotSearch" :key="index"  @click="onSearch(hotword)">
          {{ hotword }}
        </li>
      </ul>
    </div>
    <!-- 搜索结果 -->
    
    <bast-list v-if="kwordResult.length > 0" :bastList="kwordResult"></bast-list>
    <div v-if="isHide" class="imgbox">
        <img class="image" src="/h5/img/noSearch.72221156.png" alt=" ">
    </div>
    
  </div>
</template>
<script>
import BastList from "@/components/BastList"; //
export default {
    components:{
        BastList
    },
    data() {
        return {
            hotSearch: [], //热门搜索数据
            keywords:"",  //输入的值(关键词)
            kwordResult:[], //搜索匹配的结果
            isHide:false,  //显示隐藏
        };
    },
    created() {
        this.axios("http://47.115.51.185/api/search/keyword").then((result) => {
        //   console.log("result==>", result);
        this.hotSearch = result;
        });
    },
    methods: {
        onSearch(e) {
            console.log("e",e,typeof (e))
            if(e.length>0){
                this.keywords=e;
                console.log("this.keywords",this.keywords)
            }
            if(this.keywords==""){ //判断kwordResult无值时
                this.kwordResult="";    
                return;
            }
            this.axios(`http://47.115.51.185/api/products?page=1&limit=20&keyword=${this.keywords}`)
                .then(re=>{
                    console.log("搜索匹配的结果re=>",re);
                    this.kwordResult=re;
                    if(this.kwordResult.length<=0){
                        this.isHide=true
                    }else{
                        this.isHide=false
                    }
            });
            
            
        },
    },
};
</script>
<style lang="less" scoped>
// 搜索
// /deep/深度修改
/deep/ .van-search__content {
  border-radius: 15px;
  .van-icon {
    font-size: 20px;
  }
}
/deep/ .van-search__action {
  padding: 0px 15px 0px 15px;
}

// 热门搜索
.hotWords {
    font-size: 16px;
    line-height: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin: 0px 15px;
  .hotTitle {
    color: #999;
    padding-left: 5px;
  }
  .hotContent {
    display: flex;
    flex-wrap: wrap;
    li {
        color: #454545;
        font-size: 13px;
        margin: 10px 15px 0px 0px;
        border: 1px solid #aaa;
        border-radius: 3px;
        padding: 0px 10px;
    }
  }
}
.imgbox{
    width: 207px;
    height: 168px;
    border: 1px solid rgb(221, 220, 220);
    margin: 40px auto;
    .image{
        display: block;
        width: 100%;
    }
}

</style>